<template>
  <view class="filter-drawer" @click="bindClose" :style="show ? 'display: flex;' : 'display: none;'">
    <!-- <view class="mask" :style="{background:show?'rgba(0,0,0,0.4)':'none'}"  >
		</view>	 -->
    <view style="width: 100%" class="main">
      <view class="filter-content" @click.stop="clickstop">
        <view class="down" @click="bindClose">
          <view class="down-btn"></view>
        </view>
        <view class="middle">
          <view class="filter-content-title">{{ title }}</view>
          <scroll-view scroll-y="true" style="max-height: 700rpx" :enhanced="true" :bounces="false"
            :show-scrollbar="false" :scroll-top="scrollTop">
            <!-- 选择日期 -->
            <view v-if="isShowDate">
              <date-filter @getDate="getDate" :isResetDate="isResetDate" ref="date-filter"
                :dateObj="dateObj"></date-filter>
            </view>
            <!-- 选择内容 -->
            <view v-for="(item, index) in filterList" :key="index">
              <view class="filter-content-list" :style="border ? 'border-top:1rpx solid #eee' : ''"
                v-if="fitlerContract(item)">
                <!-- <view class="filter-content-list-title" v-if="item.title">{{
                  item.title
                }}</view> -->
                <view class="subTitler" :style="{
                  'padding-bottom': contractState ? '0rpx' : '20rpx',
                }">
                  <view class="filter-content-list-title" v-if="item.title">{{ item.title }}
                    <text v-if="item.key == 'overdue'"
                      style="color: #999999;font-size: 12px;font-weight: normal;">(仅年审梯保养任务参与判断是否逾期)</text>
                  </view>
                  <view v-if="isShowMoreTag(item.list, item.key)" @click="showMore(item)" class="moreTag">
                    <view>
                      {{ showMap[item.key].flag ? "收起" : "显示更多" }}
                    </view>
                    <view style="display: flex; align-items: center">
                      <image class="moreImg" src="@/static/images/maintain/sq.png" v-if="showMap[item.key].flag" />
                      <image class="moreImg" src="@/static/images/maintain/zk.png" mode="" v-else />
                    </view>
                  </view>
                </view>
                <view :class="['tag-content']">
                  <view v-for="(it, idx) in item.list" :key="idx" :class="['tag-content-item']">
                    <view @click="chooseTag(item.key, it)" :class="['tag', getChooseStatus(item, it) ? 'act' : '']" v-if="Object.keys(showMap).length && showMap[item.key].flag
                      ? item.list
                      : idx < 6
                      ">
                      {{ it.name }}
                    </view>
                  </view>
                </view>

                <!-- <view
                  class="tag"
                  @click="showMore(item)"
                  v-if="isShowMoreTag(item.list, item.key)"
                  >{{ showMap[item.key].flag ? "收起更多" : "查看更多" }}</view
                > -->
              </view>
            </view>

            <!-- 保养模板 -->
            <view v-if="isShowTemplate"><task-filter @chooseTemp="chooseTemp" ref="task-filter"></task-filter></view>
            <view>
              <pj-filter @choosePart="choosePart" v-if="isShowPart" ref="pj-filter"></pj-filter>
            </view>
          </scroll-view>

          <view class="drawBottom">
            <view class="reSet" @click="handleReset">重置</view>
            <view class="submit" @click="submit">{{ comfireText }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// 用法
// <filter-drawer :show="showFilter" @closed="showFilter=false" @submit="submitFilter"></filter-drawer>
// border 是否显示分割线
// filterList  筛选列表 格式 [{title:'',list:[],key:'xxx'}] key代表筛选字段 示例看下面filterList 的return
// chooseData 默认选中 格式 {key:[1,2,3]}
import DateFilter from './dateFilter';
// import DateFilter from '@/pageModules/projectInfo/components/filter/dateFilter.vue';
import PjFilter from './pjFilter';
// import PjFilter from '@/pageModules/projectInfo/components/filter/pjFilter.vue';
import TaskFilter from './taskFilter.vue';
export default {
	components: {
		DateFilter,
		TaskFilter,
		PjFilter,
	},
	name: 'filter-drawer',
	data() {
		return {
			choosed: {},
			allChecked: false,
			showMap: {},
			dateObj: {},
			isResetDate: false,
			scrollTop: 0
		};
	},
	props: {
		chooseData: {
			type: Object,
			default: () => {
				return {};
			},
		},
		border: {
			// 是否显示边框
			type: Boolean,
			default: false,
		},
		filterList: {
			type: Array,
			default: () => {
				return [];
				// return [{ title: '合同', list: [{ name: '即将到期', value: '1' }], key: 'status' }, { title: '项目类型', list: [{ name: '学校', value: '1' },{name:'小区',value:'2'}], key: 'school' }]
			},
		},
		show: {
			type: Boolean,
			default: true,
		},
		comfireText: {
			type: String,
			default: '确认',
		},
		keyMap: {
			type: Object,
			default: ()=>{
				return {};
			}
		},
		// 标题的名字
		title: {
			type: String,
			default: '筛选',
		},
		isShowDate: {
			type: Boolean,
			default: false,
		},
		isShowTemplate: {
			type: Boolean,
			default: false,
		},
		isShowPart: {
			type: Boolean,
			default: false,
		},
	},
	watch: {
		keyMap(val) {
			this.showMap = val;
		},
		filterList(val) {
			console.log(val, '新的数据');
		},
		show(val) {
			console.log(val, 'val的值');
			if (val) {
				this.scrollTop = 1;
				this.$nextTick(() => {
					this.scrollTop = 0;
				});
			}
		},
	},
	created() {
		this.choosed = this.chooseData;
	},
	methods: {
		choosePart(res) {
			let partsId = res.map((item) => {
				return item.id;
			});

			this.choosed.partsId = partsId;
			this.$emit('chooseTag', {
				allChecked: this.allChecked,
				choosed: this.choosed,
				...this.dateObj,
			});
		},
		// 获取模板选择
		chooseTemp(res) {
			let templateIds = res.map((item) => {
				return item.id;
			});

			this.choosed.templateIds = templateIds;
			this.$emit('chooseTag', {
				allChecked: this.allChecked,
				choosed: this.choosed,
				...this.dateObj,
			});
		},
		// 获取选择的时间
		getDate(res) {
			console.log(res, '获取时间');
			this.dateObj = JSON.parse(JSON.stringify(res));
			this.$emit('chooseTag', {
				allChecked: this.allChecked,
				choosed: this.choosed,
				...res,
			});
		},
		doNothing() { },
		fitlerContract(item) {
			let flag = true;
			if (item.key == 'contractStatus') {
				flag = this.findRoute('mystatistics_contract');
			}
			return flag;
		},
		initData(obj, date) {
			// console.log(obj,date,'日期');
			this.choosed = obj;
			// this.filterList=list

			// return
			if (this.isShowDate) {
				this.dateObj = JSON.parse(JSON.stringify(date));
				this.$refs['date-filter'].initDate(this.dateObj);
			}
		},
		// 获取是否选中
		getChooseStatus(item, it) {
			if (this.choosed[item.key] && this.choosed[item.key].length > 0) {
				if (this.choosed[item.key].indexOf(it.value) != -1) {
					return true;
				}
			}
			return false;
		},
		// 选中某个标签
		chooseTag(key, it) {
			// 如果是全选全选关闭
			console.log(key, it, '选中的值');
			if (this.allChecked) {
				this.allChecked = false;
			}

			if (this.choosed[key]) {
				let idx = this.choosed[key].indexOf(it.value);
				if (idx == -1) {
					this.choosed[key].push(it.value);
				} else {
					this.choosed[key].splice(idx, 1);
				}
			} else {
				this.choosed[key] = [it.value];
			}
			this.$forceUpdate();

			this.$emit('chooseTag', {
				allChecked: this.allChecked,
				choosed: this.choosed,
				...this.dateObj,
			});
		},
		// 全选
		chooseAll() {
			this.choosed = {};
			// if(this.allChecked){
			// 	this.choosed={}
			// }
			this.allChecked = !this.allChecked;

			this.$emit('chooseTag', {
				allChecked: this.allChecked,
				choosed: this.choosed,
			});
		},
		// 确定
		async submit() {
			this.$emit('submit', {
				allChecked: this.allChecked,
				choosed: this.choosed,
				parentArr: this.parentArr,
				keyMap: this.showMap,
				dateObj: this.dateObj,
			});
		},
		clickstop() { },
		bindClose() {
			this.$emit('closed', 1);
		},
		// 标签点击更多
		showMore(e) {
			this.showMap[e.key].flag = !this.showMap[e.key].flag;
		},
		// 判断是否显示更多
		isShowMoreTag(list, key) {
			if (!Object.keys(this.showMap).length) {
				return;
			}
			let flag = false;
			if (list.length > 5) {
				flag = true;
				if (this.showMap[key].flag) {
					flag = true;
				}
			}
			return flag;
		},
		// 点击重置
		handleReset() {
			// console.log('切换重置');
			let len = Object.keys(this.choosed).length;
			if (len !== 0) {
				for (let key in this.choosed) {
					this.choosed[key] = [];
					this.$forceUpdate();
				}
				this.choosed = {};
			}
			if (this.allChecked) {
				this.allChecked = false;
			}
			this.dateObj.startTime = '';
			this.dateObj.endTime = '';
			this.dateObj.value = '';
			// console.log("重置");
			// 重置时间组件
			if (this.isShowDate) {
				this.$refs['date-filter'].initDate(this.dateObj);
			}

			// 重置模板组件
			if (this.isShowTemplate) {
				this.$refs['task-filter'].initData([]);
			}
			if (this.isShowPart) {
				// 重置配件组件
				this.$refs['pj-filter'].initData([]);
			}
			this.$emit('chooseTag', { allChecked: false, choosed: this.choosed });
		},
	},
};
</script>

<style lang="scss" scoped>
.filter-drawer {
  width: 100%;
  height: 100%;
  background-color: $uni-bg-color-mask;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-end;
  animation: fadeInOut 0.3s ease;
  box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);

  .mask {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .main {
    position: absolute;
    bottom: 0;
    // max-height: 1100rpx;
    // overflow: auto;
  }

  .filter-content {
    background-color: #fff;
    border-top-right-radius: 8rpx;
    border-top-left-radius: 8rpx;
    animation: scaleFrames 0.3s ease;
    padding-top: 0rpx;

    // overflow-y: auto;
    .down {
      width: 100%;
      padding: 20rpx 0;

      .down-btn {
        width: 64rpx;
        height: 10rpx;
        background: #d8d8d8;
        border-radius: 6rpx;
        margin: 0 auto;
      }
    }

    .middle {
      max-height: 1600rpx;
      overflow-y: auto;
    }

    &-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      padding: 0 40rpx;
    }

    &-list {
      display: flex;
      // width: 100%;
      flex-wrap: wrap;
      padding: 20rpx 40rpx;

      .subTitler {
        display: flex;
        justify-content: space-between;
        min-height: 40rpx;
        width: 100%;
        align-items: center;

        .moreTag {
          color: #0091ff;
          display: flex;
          justify-content: flex-end;
          font-size: 24rpx;
          width: 300rpx;

          .moreImg {
            width: 24rpx;
            height: 24rpx;
            margin-bottom: 4rpx;
          }
        }
      }

      &-title {
        // width: 100%;
        font-size: 30rpx;
        font-weight: 600;
        text-align: left;
        color: #333;
        // padding-bottom: 15rpx;
      }

      .tag {
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        border: 2rpx solid #cccccc;
        border-radius: 8rpx;
        margin-bottom: 14rpx;
        font-size: 28rpx;
        color: #666666;
        transition: 0.3s all;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        width: 216rpx;
      }

      .act {
        color: #0091ff;
        border-color: #0091ff;
      }

      .tag-content {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .tag-content-item {
          width: 33.3%;
          display: flex;
        }

        .tag-content-item:nth-child(3n) {
          justify-content: flex-end;
        }

        .tag-content-item:nth-child(3n + 5),
        .tag-content-item:nth-child(2) {
          justify-content: center;
        }
      }

      .normalContentItem {
        margin-right: 11rpx;
      }

      .normalContent {
        justify-content: flex-start;
      }
    }
  }
}

@keyframes scaleFrames {
  from {
    transform: translateY(110%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes fadeInOut {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.drawBottom {
  display: flex;
  /* margin-top: 20rpx; */
  /* margin-bottom: 20rpx; */
  bottom: 0;
  left: 0;
  height: 110rpx;
  align-items: center;
  padding: 0 38rpx;
  // z-index: 10;
  border-top: 2rpx solid #eeeeee;

  view {
    display: flex;
    flex: 1;
    height: 70rpx;
    justify-content: center;
    align-items: center;
    border-radius: 8rpx;
    font-size: 28rpx;
    border-radius: 0rpx 8rpx 8rpx 0rpx;
  }

  .reSet {
    background-color: #f5fbff;
    color: #0091ff;
  }

  .submit {
    // width: 100%;
    // text-align: center;
    background-color: $theme-color;
    color: #fff;
  }
}
</style>
